<template>
	<div class="myLineProgress" v-show="!item.common.isHidden" :style="commonStyle">
		<u-line-progress
			:height="item.common.height"
			:percent="percent"
			:round="item.common.round"
			:active-color="item.common.activeColor"
			:inactive-color="item.common.inactiveColor"
			:show-percent="item.common.showPercent"
			:striped="item.common.striped"
			:striped-active="item.common.stripedActive"
		></u-line-progress>
	</div>
</template>

<script>
	import calcBaseStyle from '../libs/calcBaseStyle'
	export default {
		name: 'myLineProgress',
		props:{
			pageConfig: {
				type: Object,
				default(){
					return {}
				}
			},
			pcid: null
		},
		data(){
			return {
				item: {common: {},style: {},children:[]},
			}
		},
		created() {
			this.$parent.widgetList.some(widget=>{
				if(widget.cid === this.pcid){
					this.item = widget
					return true
				}
			})
		},
		computed:{
			commonStyle(){
				return calcBaseStyle(this.item,this.pageConfig.contentH)
			},
			percent(){
				if(!this.item.common.activeNum){
					return 0
				}
				var activeNum = this.item.common.activeNum*1 || 0
				var inactiveNum = this.item.common.inactiveNum*1 || 100
				return parseInt(activeNum * 100 / (activeNum + inactiveNum))
			},
		}
	}
</script>

<style lang="less" scoped>
	.myLineProgress {
		position: absolute;
		line-height: 0;
		overflow: hidden;
	}
</style>
